<template>
	<dialog :open="isopen" class="dia">
		{{store.state.alert.msg}}
	</dialog>
</template>

<script setup>
	import {onMounted,computed} from 'vue';
	import store from '../store';

	// 计算属性 Vue 3.0 写法
	const isopen = computed(() => {
		let b = store.state.alert.open > 0;
		return b;
	});

	// 组件挂载 vue3.0 的写法
	onMounted(() => {
		const t1 = setInterval(() => {
			store.state.alert.open--; //每一秒减去 1， 当<1 时， 窗口关闭
		}, 1000); // 每一秒检查一次		
	})
</script>

<style scoped>
	.dia {
		position: absolute;
		top: 1px;
		left: 50%;
		font-size: 0.9em;
		min-width: 20%;
		height: 20px;
		max-height: 20px;
		background-color: lightyellow;
		border: 1px solid lawngreen;
	}
</style>
